@charset "utf-8";
@function px($px){
    @return  ($px/2);
}
$fontsize:40;
@function r($px){
    @return $px/$fontsize * 1rem;
}


.web1{
    width:100%;
    height: 100%;
    position: relative;

      
    .herBox{
        width: 100%;
        height: r(108);
        position: absolute;
        top: 0;
        input{
             width: r(120);
             height: r(60);
             border: 1px solid #FF9344;
             border-radius: 25px;
             background: #FFFFFF;
             font-size: r(30);
             float: left;
             margin-top: r(48);
             margin-left: r(24);
        }
        .xiala{
            width: r(160);
            height: r(56);
            border: 1px solid #FF9344;
            font-size: r(30);
            float: right;
            margin-top: r(48);
            background: url(../img/xiala_05.jpg)no-repeat r(30) center;
            margin-right: r(18);
        }
        p{
            width: r(80);
            height: r(35);
            text-align: center;
            line-height: r(35);
            font-size: r(30);
            margin: 0 auto;
            padding-top: r(60);
            
        }
    }
    
    section{
                width: 100%;
                position: absolute;
                top: r(108);
                bottom: r(136);
                overflow: scroll;
                -webkit-overflow-scrolling: touch;
    
    .sectionBox1{
        height: r(50);
        width: 100%;
        margin-top: r(35);
                .soux{
                height: r(50);
                width: r(264);
                border: 1px solid #ff9344;
                border-radius:25px ;
                padding-left: r(8);
                margin: 0 auto;
                box-sizing: border-box;
                input{
                    width:r(190);
                    height: 100%;
                    border: none;
                    vertical-align: top;
                    font-size: r(24);
                    line-height: r(50);
                    text-indent: 2px;
                    position: relative;
            }
            i{
                
                font-size: r(30);
                color: #ff9344;
                line-height: r(50);
                text-align: center;
                position: absolute;
               
                left: r(450);
            }
            }
        }
            h3{
                font-size: r(30);
                text-align: center;
                margin-top: r(34);
            }
            .sectBox{
                width: r(520);
                height: r(130);
                margin: 0 auto;
                margin-top: r(15);
                ul{
                    a{
                        color: #a0a0a0;
                        li{
                        width:r(124);
                        height: r(62);
                        float: left;
                        margin: r(3);
                        background: #dcdcdc;
                        font-size: r(20);
                        text-align: center;
                        line-height: r(62);
                        }
                    }
                }
            }
        
            .sectBox2{
                width: 100%;
                height: r(54);
                margin-top: r(50);
                img{
                    width: r(54);
                    height: r(54);
                    float: left;
                    margin-left: r(24);
                }
                h3{
                    width: r(240);
                    height: 100%;
                    line-height: r(54);
                    font-size: r(30);
                    color: #000;

                }
                span{
                    width: r(125);
                    line-height: r(54);
                    font-size: r(30);
                    float: right;
                    position: absolute;
                    top: r(345);
                    left: r(625);
                    i{
                        font-size: r(30);
                        color: #FF9344;
                        line-height: r(30);
                    }
                }
            }
            
            .sectBox3{
                width: r(730);
                height: r(355);
                margin: 0 auto;
                margin-top: r(35);
                .sectBox3-1{
                    width: r(303);
                    height: r(355);
                    float: left;
                    margin-right: r(7);
                    img{
                       width:100%;
                       height: 100%; 
                    }
                }
                .sectBox3-2{
                    width: r(420);
                    height: r(145);
                    float: right;
                    margin-bottom: r(15);
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .sectBox3-3{
                    width: r(195);
                    height: r(195);
                    float: left;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .sectBox3-4{
                    width: r(210);
                    height: r(195);
                    float: right;
                    img{
                        width: 100%;
                        height: 100%; 
                    }
                }
            }
            
            
            
            
            .sectBox4{
                width: 100%;
                height: r(54);
                margin-top: r(50);
                img{
                    width: r(50);
                    height: r(50);
                    float: left;
                    margin-left: r(24);
                }
                h3{
                    width: r(235);
                    height: 100%;
                    line-height: r(54);
                    font-size: r(30);
                    color: #000;

                }
                span{
                    width: r(125);
                    line-height: r(54);
                    font-size: r(30);
                    float: right;
                    margin-top: -70px;

                    i{
                        font-size: r(30);
                        color: #FF9344;
                        line-height: r(30);
                    }
                }
            }
            
            
            
            .sectBox5{
                width: 100%;
                
                margin-top: r(50);
//              padding-bottom: 50px;
                ul{
                    margin-left: r(22);
                    li{
                        float: left;
                        width: r(220);
                        height: r(200);
                        margin-right: r(22);
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
            
            
            
            
            
   }
    
    
    
    
    
    .weiBox{
        width: 100%;
        height: r(136);
        clear: both;
        position: absolute;
        bottom: 0;
        ul li{
            width: 25%;
            height: r(136);
            float: left;
            text-align: center;
                      
            .iconfont{
                color: transparent;
                font-size: r(60);
                -webkit-text-stroke: 1px #FF9344;
            }
            &.active .iconfont{
                  color: #FF9344;
            }
            p{
              font-size: r(32);
              color: black;
            }
            &:hover .iconfont{
              color: yellow;
            }
        }
    }

}